<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" ref="filterRef" size="mini" class="form-filter" label-width="100px">

            <el-form-item label="司机编号" prop="driverNo">
                <el-input v-model="filter.driverNo" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="司机姓名" prop="driverName">
                <el-input v-model="filter.driverName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="司机手机号" prop="driverPhone">
                <el-input v-model="filter.driverPhone" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="身份证号" prop="idCardNumber">
                <el-input v-model="filter.idCardNumber" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="UID" prop="uid">
                <el-input v-model="filter.uid" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="车牌号" prop="licensePlateNumber">
                <el-input v-model="filter.licensePlateNumber" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="角色" prop="roleId">
                <el-select v-model="filter.roleId" filterable clearable placeholder="请选择" @change="getPage()">
                    <el-option
                        v-for="item in Dict.enums.driverRole"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="线路组" prop="lineGroupId">
                <el-select v-model="filter.lineGroupId" clearable filterable placeholder="请选择"  @change="getPage()">
                    <el-option
                        v-for="item in lineGroupOptions"
                        :key="item.id"
                        :label="item.lineGroupName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="分流站点" prop="flowStationId">
                <el-select v-model="filter.flowStationId" clearable filterable placeholder="请选择"  @change="getPage()">
                    <el-option
                        v-for="item in stationOptions"
                        :key="item.id"
                        :label="item.stationName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="getPage()">查询</el-button>
                <el-button @click="resetForm('filterRef')">重置</el-button>
                <el-button @click="showUpdate()">添加</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table v-loading="loading" style="width: 100%" :data="page.records" border stripe
                :cell-class-name="getCellIndex" @cell-click="tableDbEdit"
                :header-cell-style = "headerCellStyle">
                <el-table-column prop="id" label="ID" width="60px" />
                <el-table-column prop="driverNo" label="司机编号" />
                <el-table-column prop="driverName" label="司机姓名" />
                <el-table-column prop="driverPhone" label="司机手机号" />
                <el-table-column prop="idCardNumber" label="身份证号" />
                <el-table-column prop="uid" label="UID" />
                <el-table-column prop="licensePlateNumber" label="车牌号" />

                <el-table-column prop="drivingLicense" label="驾驶证" width="120px" >
                    <template #default="scope">
                        <el-image v-for="item in scope.row.drivingLicense" :src="item.url" style="width: 40px; height: 40px"
                                    :preview-src-list="[item.url]"
                                  fit="cover">
                            <div slot="error" class="image-slot" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;font-size: 20px;">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="networkCarLicense" label="网约车证" width="120px">
                    <template #default="scope">
                        <el-image v-for="item in scope.row.networkCarLicense" style="width: 40px; height: 40px" :src="item.url"
                                  :preview-src-list="[item.url]"
                                  fit="cover">
                            <div slot="error" class="image-slot" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;font-size: 20px;">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="roleName" label="角色" />
                <el-table-column prop="lineGroupNames" label="线路组" />
                <el-table-column prop="flowStationName" label="分流站点" />

                <el-table-column width="70" label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" @change="statusSwitch(scope.row.status,scope.row.id)" />
                    </template>
                </el-table-column>

                <el-table-column width="80" prop="updateName" label="更新人" />
                <el-table-column width="160" prop="updateTime" label="更新时间" />

                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showUpdate(scope.row.id)">编辑
                        </el-button>

                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                            <el-button slot="reference" size="mini" style="margin:0 0px 10px 10px;">删除
                            </el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background :current-page="page.current" :page-sizes="[10, 20, 30, 50,100]" :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total" style="margin-top:20px;"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            <Update ref="updateRef" @refresh="getPage()" />
        </div>
    </section>
</template>
<script>
    import { DriverApi } from '@/api/user/DriverApi'
    import Update from './update.vue'
    import {LineGroupApi} from '@/api/intercity/LineGroupApi'
    import {StationApi} from '@/api/intercity/StationApi'
    import {VehicleApi} from '@/api/user/VehicleApi'

    export default {
        name: 'driverIndex',
        components: {
            Update
        },
        data() {
            return {
                page: {
                    total: 0,
                    size: 10,
                    current: 1,
                    pages: 0,
                    records: []
                },
                filter: {
                    uid: '',
                    driverNo: '',
                    driverName: '',
                    driverPhone: '',
                    password: '',
                    idCardNumber: '',
                    idCardAddress: '',
                    licensePlateNumber:'',
                    roleId: '',
                    lineGroupId: '',
                    flowStationId: '',
                    wxMpOpenId: '',
                    wxMiniOpenId: '',
                    wxAppOpenId: '',
                    provinceCode: '',
                    provinceName: '',
                    cityCode: '',
                    cityName: '',
                    districtCode: '',
                    districtName: '',
                },
                coordinate: {
                    column: -1,
                    row: -1
                },
                loading: false,

                lineGroupOptions:[],
                stationOptions:[],
                headerCellStyle:{
                    "background-color":"#F2F5FC"
                }
            }
        },
        created() {
            this.getLineGroupOptions()
            this.getStationOptions()
            this.getPage()
        },
        methods: {
            // 获取用户列表
            getPage() {
                const params = Object.assign({}, this.filter);
                params['pageIndex'] = this.page.current
                params['pageSize'] = this.page.size

                this.loading = true
                DriverApi.getPage(params).then((response) => {
                    this.page = response
                    this.loading = false
                }).catch((err) => {
                    this.loading = false
                })
            },



            // 获取总线路组
            getLineGroupOptions() {
                LineGroupApi.getList().then((response) => {
                    this.lineGroupOptions = response
                })
            },

            // 获取站点
            getStationOptions() {
                StationApi.getList().then((response) => {
                    this.stationOptions = response
                })
            },


            // 删除数据
            handleDelete(id) {
                DriverApi.delete(id).then((response) => {
                    this.getPage()
                })
            },

            handleSizeChange(val) {
                this.page.size = val
                this.page.current = 1
                this.getPage()
            },

            handleCurrentChange(val) {
                this.page.current = val
                this.getPage()
            },

            showUpdate(id) {
                this.$refs['updateRef'].showUpdate(id)
            },

            // 修改状态
            statusSwitch(val, id) {
                const params = {
                    id: id,
                    status: val
                }

                DriverApi.edit(params).then((response) => {})
            },
            // 修改排序
            submitTableEdit(row) {
                this.coordinate.column = -1
                this.coordinate.row = -1
                const params = {
                    id: row.id,
                    sort: row.sort
                }
                DriverApi.edit(params).then((response) => {})
            },
            getCellIndex({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                row.index = rowIndex
                column.index = columnIndex
            },
            tableDbEdit(row, column) {
                this.coordinate.row = row.index
                this.coordinate.column = column.index
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
                this.getPage()
            }
        }
    }
</script>

<style lang="scss" scoped></style>
